<template>
  <div class="mapIndex">
     <div>

     </div>
     <vae-map  :options="options"  id="map_pg"    @init-map="initMap" ></vae-map>
  </div>
</template>

<script>
import  geojson from "@/../public/mapJson/100000_full.json"
import Vue from 'vue'
import vpopup from './popup_pg.vue'
export default {
  name: "map",
  data() {
    return {
      options:{
        zoom:3.5,
        zoomDelta:0.2,
      },
      baseLayers:L.layerGroup(),
      map:null,
      markerLayers:L.layerGroup(),
      geojsonMap:null,
      allMineData:[],
      levelMap:{
        "1":"#db2d2d ",
        "2":"#fc7500",
        "3":"#e3ca21",
        "4":"#00b4ff",
      },
      iconFont:{
        "ts":'icon iconfont icon-jiance',//态势预警更名-态势监测
        "sg":'icon iconfont icon-zhuizong',//事故预警更名-事故追踪
        "zh":'icon iconfont icon-tianqi1',//灾害更名-极端天气
        "ws":'icon iconfont icon-wasi',//瓦斯预警-更名-地压冲击低压冲击综合预警
     //   "jd":'icon iconfont icon-kuangyadiya',//瓦斯预警
        "gz":'icon iconfont icon-fenxi',//感知预警-更名综合分析
        "jd":'icon iconfont icon-wasi',//极端天气耦合

      },
      active:"",
      listMap:[
        {name:"态势预警",num:10,type:"ts"},
        {name:"事故预警",num:10,type:"sg"},
        {name:"灾害预警",num:10,type:"zh"},
        {name:"瓦斯量",num:10,type:"ws"},
        {name:"极端天气",num:10,type:"jd"},
      ],
      tileLayer: L.layerGroup(),
      markerList:[],
    }
  },
  created(){
  },
  methods:{
     initMap(v){
        this.map=v;
        this.tileLayer.addTo(v).bringBoBack;
        this.markerLayers.clearLayers();
        this.baseLayers.clearLayers();
        this.baseLayers.addTo(this.map);
        this.markerLayers.addTo(this.map);
        this.geojsonMap=  L.geoJSON(geojson.features, {
          style: (feature) => {
            return {
              fillColor: "#5a7ace",
              weight: 2,
              opacity: 1,
              color: '#0262ea',
              dashArray: '1',
              fillOpacity: 0.6,
              data: {},
            }
          },
          onEachFeature: (feature, layer) => {//遍历每一个数据，也就是为每一个地点加上监听器
            let name = feature.properties.name.slice(0, 2);
            let divIcon = L.divIcon({
              html: `<div style="font-size: 3px;color: #fff">${name == '内蒙' || name == '黑龙' ? feature.properties.name.slice(0, 3) : name}</div>`,
              className: 'text-light',
              iconSize: [40, 16],
            })
            if (feature.properties.center) {
              L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 0.2], {riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
              layer.on({ mouseover: this.highlightFeature,  mouseout: this.resetHighlight, });
            }

          },
        }).addTo(this.map);
        this.map.fitBounds(this.geojsonMap.getBounds());
        this.initMarker()
     },
     async  initMarker() {
         let {data}=await  this.request({
             url: "data/getData/1.10",
             method: "get"
         })
         //   console.log(data1,'----data1')
         // http://171.217.93.19:8089/data/getData/1.10
        this.markerList=data;
          this.markerList.forEach(v => {
            let icon = L.glyphicon({
              icon: this.iconFont[v.type],
              size: "26",//编译为width:24px,height:24px
              fontSize: "14",
              background: this.levelMap[v.level],
              color: '#fff',
              borderRadius: 26,//跟size一样大为圆形
              borderWidth: 1,
              borderColor:'#fff',
              boxShadow: false,
              additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
              className: 'className',
              effect: {
                type: null,//设置'halo'则默认开启光晕效果
                size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
                color: this.levelMap[v.level],//扩散的光晕的颜色
                interval: 3//动画的时长
              }
            });
            let marker = L.marker([v.lat, v.lng], { riseOffset: 300,interactive: true, draggable: false }).bindTooltip(v.loc).setIcon(icon).addTo(this.markerLayers)
            this.bindPopup(marker,v);
          })
        },
      bindPopup(marker,v) {
          let popupContent = "<div id='popup-" +v.id  + "' style='height:180px;'>123</div>";
          marker.bindPopup(popupContent, {offset: L.point(1, -10), minWidth: 250, closeButton: true});
          marker.on('popupopen', (e) => {
            new Vue({
              el: '#popup-' + v.id,
              render: h => h(vpopup, {props: {vdata: v, vm: this}})
            })
          });
        },
        //公共样式
      resetHighlight(e) {//当鼠标退出后reset
          var layer = e.target;
          layer.closePopup();
          this.geojsonMap.resetStyle(e.target);//  geojson要先定义
        },
      highlightFeature(e) {//当鼠标拂过时高亮显示
          var layer = e.target;
          layer.openPopup();
          layer.setStyle({
            weight: 3,
            dashArray: '',
            color: '#0723db',
            fillOpacity: 0.9,
            fillColor: "#1CDDFF"
          });
          if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
          }
        },
      mapFillColor(feature,) {
          return {
            fillColor: this.getColor(feature.properties.adcode).color,
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '1',
            fillOpacity: 0.7,
            data: this.getColor(feature.properties.adcode).data
          }
        },
    }
}
</script>

<style lang="less">
  .iconMap{
    width: 2vw;
    height: 2vw;

  }
  .mapIndex{
    width: 100vw;
    height: 100vh;
    background: url("../../../public/images/indexBanner.png") no-repeat;
    background-size: 100%  100%;
    position: relative;

    .list{
      z-index: 1000;
      position: absolute;
      background: url("../../../public/images/bj1.png") no-repeat;
      padding: 1vh 0  1vh 0.5vh;
      background-size: 100% 100%;
      width: 11vw;
      left: 29vw;
      top: 11vh;
      color: #fff;
      .colorList{
        font-size: 1.2vh;
        padding-left: 0.5vw;
        padding-bottom: 0.5vh;
      }
      .iconColor{
        display: inline-block;
        width: 0.4vw;
        height: 0.4vw;
        border-radius: 80%;
      }
      .level1{
        background: #fb0d0dFF;
      }
      .level2{
        background: #fe9c00FF;
      }
      .level3{
        background: #ffdc6aFF;
      }
      .level4{
        background: #0d5afbFF;
      }
      .row{
        cursor: pointer;
        line-height: 2vh;
        font-size:1.2vh;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        color: #fff;
        .icon{

          padding-right: 0.5vw;
        }
      }
      .row.active{
        background: url("../../../public/images/bj.png") no-repeat;
      }
      .row:hover{
        background: url("../../../public/images/bj.png") no-repeat;
      }
    }
  }

</style>
<style>
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: transparent;
  background: url("../../../public/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  box-shadow:none;
  color: #FFF8DC;

}
</style>
